<template>
  <div class="admin-layout" :class="{ collapsed: isCollapse }">
    <!-- 侧边栏 -->
    <Sidebar :is-collapse="isCollapse" @update:isCollapse="isCollapse = $event" />

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 顶部导航 -->
      <el-header class="admin-header">
        <div class="header-left">
          <h1 class="page-title">{{ currentPageTitle }}</h1>
          <Breadcrumb :is-route-changing="isRouteChanging" />
        </div>

        <div class="header-right">
          <!-- 快捷操作按钮组 -->
          <div class="quick-actions">
            <el-tooltip content="全屏" placement="bottom">
              <el-button :icon="FullScreen" circle size="small" class="action-btn" />
            </el-tooltip>
            <el-tooltip content="刷新" placement="bottom">
              <el-button :icon="Refresh" circle size="small" class="action-btn" />
            </el-tooltip>
          </div>

          <!-- 搜索框 -->
          <div class="search-container">
            <div class="custom-search">
              <div class="search-input-wrapper">
                <input v-model="searchText" type="text" class="search-input" placeholder="搜索功能、菜单、页面..."
                  @keyup.enter="handleSearch">
                <button v-if="searchText" @click="clearSearch" class="clear-btn" type="button">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                      stroke-linejoin="round" />
                  </svg>
                </button>
              </div>
              <button @click="handleSearch" class="search-btn" type="button">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </button>
            </div>
          </div> <!-- 通知中心 -->
          <el-badge :value="notificationCount" :hidden="notificationCount === 0" class="notification-badge">
            <el-tooltip content="消息通知" placement="bottom">
              <el-button :icon="Bell" circle size="small" class="action-btn notification-btn" />
            </el-tooltip>
          </el-badge>

          <!-- 用户信息 -->
          <el-dropdown trigger="click" class="user-dropdown" @command="handleCommand">
            <div class="user-info">
              <el-avatar :size="36" class="user-avatar" :src="src">
              </el-avatar>
              <div class="user-detail">
                <div class="user-name">{{name}}</div>
                <div class="user-role">超级管理员</div>
              </div>
              <el-icon class="dropdown-icon">
                <ArrowDown />
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu class="user-dropdown-menu">
                <el-dropdown-item class="user-profile">
                   <div class="profile-info">
                    <el-avatar :size="32" :src="src">
                    </el-avatar>
                    <div>
                      <div class="profile-name">{{name}}</div>
                      <div class="profile-email">{{email}}</div>
                    </div> 
                  </div> 
                </el-dropdown-item>
                <el-dropdown-item divided icon="User" command="center">
                  <span>个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item icon="Setting">
                  <span>账户设置</span>
                </el-dropdown-item>
                <el-dropdown-item icon="Key">
                  <span>修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item icon="Moon">
                  <span>深色模式</span>
                </el-dropdown-item>
                <el-dropdown-item divided icon="SwitchButton" class="logout-item" command="out">
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 页面内容区 -->
      <el-main class="admin-main">
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { FullScreen, Refresh, Bell, ArrowDown } from '@element-plus/icons-vue'
import Sidebar from '@/components/Sidebar.vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import router from '@/router/index.js'
import { get } from '@/axios'


const src = ref('/static/3e9ce3813b7199ea9588eeb920f41208_512_512.png')
const name = ref("管理员")
const email = ref('')

getUserInfo()
function getUserInfo() {
	get('/umsAdmin/getUserInfo', {},content =>{
		if(content){
			src.value ='http://10.25.133.21:9000' + content.avatar
      name.value = content.name
      email.value = content.email
		}
	})
}

const route = useRoute()

// 响应式数据
const isCollapse = ref(false)
const searchText = ref('')
const isRouteChanging = ref(false)
const notificationCount = ref(3)

// 计算属性 - 基于路由的页面标题
const currentPageTitle = computed(() => {
  return route.meta?.name || '管理控制台'
})


// 搜索相关方法
const handleSearch = () => {
  if (searchText.value.trim()) {
    console.log('搜索内容:', searchText.value)
    // 这里可以添加搜索逻辑
  }
}

const clearSearch = () => {
  searchText.value = ''
}

function toCenter(){
  router.push('/center')
}
function toOut(){
  sessionStorage.clear()
				router.push('/')
}
function handleCommand(arg){
  if(arg === 'center'){
    toCenter()
  }else if(arg === 'out'){
    toOut()
  }
}
</script>

<style scoped lang="scss">
.admin-layout {
  height: 100vh;
  background: #f5f7fa;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 主内容区域 */
.main-content {
  margin-left: 260px;
  transition: margin-left 0.3s;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 当侧边栏收起时的样式 */
.admin-layout.collapsed .main-content {
  margin-left: 64px;
}

/* 顶部导航样式 */
.admin-header {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5.2rem;
  z-index: 999;
  position: relative;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1;
  padding: 12px 0;
  /* 添加上下内边距 */
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #8b5cf6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  position: relative;
  transition: all 0.3s ease;
}

/* 删除标题下的进度条效果 */
.page-title::after {
  display: none;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 快捷操作按钮组 */
.quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  color: #64748b;
}

.action-btn:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* 搜索框容器 */
.search-container {
  position: relative;
  z-index: 1000;
}

.custom-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 340px;
  height: 48px;
  border-radius: 24px;
  /* 半圆矩形：高度的一半 */
  border: 2px solid transparent;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(248, 250, 252, 0.95) 50%,
      rgba(241, 245, 249, 0.98) 100%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    0 8px 32px rgba(59, 130, 246, 0.08),
    0 2px 8px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(15, 23, 42, 0.02);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0 20px;
  overflow: hidden;
}

/* 搜索输入框 */
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #1e293b;
  font-weight: 500;
  padding: 0;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.search-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
  transition: color 0.3s ease;
}

/* 清除按钮 */
.clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  color: #94a3b8;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.clear-btn:hover {
  color: #64748b;
  background: rgba(148, 163, 184, 0.1);
}

.clear-btn svg {
  width: 14px;
  height: 14px;
}

/* 搜索按钮 */
.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 24px;
  /* 半圆：宽度/高度的一半 */
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.search-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.search-btn:active {
  transform: translateY(0);
  transition: transform 0.1s ease;
}

.search-btn svg {
  width: 20px;
  height: 20px;
}

/* 悬停效果 */
.search-input-wrapper:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(248, 250, 252, 0.98) 50%,
      rgba(241, 245, 249, 1) 100%);
  box-shadow:
    0 12px 40px rgba(59, 130, 246, 0.12),
    0 4px 16px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 23, 42, 0.03);
  transform: translateY(-2px) scale(1.02);
}

/* 焦点状态 */
.search-input-wrapper:focus-within {
  border-color: #3b82f6;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(248, 250, 252, 1) 100%);
  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.08),
    0 16px 48px rgba(59, 130, 246, 0.15),
    0 8px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-3px) scale(1.03);
}

.search-input-wrapper:focus-within .search-input::placeholder {
  color: #cbd5e1;
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .search-input-wrapper {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .search-input-wrapper {
    width: 240px;
    height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    /* 44px高度的一半 */
  }

  .search-input {
    font-size: 14px;
  }

  .search-btn {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    /* 44px的一半 */
  }

  .search-btn svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .search-input-wrapper {
    width: 200px;
    border-radius: 24px;
    /* 保持半圆 */
  }

  .search-btn {
    border-radius: 24px;
    /* 保持半圆 */
  }
}

/* 通知徽章 */
.notification-badge {
  position: relative;
}

.notification-btn {
  position: relative;
  overflow: visible;
}

.notification-btn::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid white;
  animation: notification-pulse 2s ease-in-out infinite;
}

@keyframes notification-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* 用户信息样式 */
.user-dropdown {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.user-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.user-info:hover::before {
  left: 100%;
}

.user-info:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.user-avatar {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.user-info:hover .user-avatar {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.user-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.user-role {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1;
  transition: color 0.3s ease;
}

.user-info:hover .user-name {
  color: #3b82f6;
}

.user-info:hover .user-role {
  color: #8b5cf6;
}

.dropdown-icon {
  font-size: 14px;
  color: #94a3b8;
  transition: all 0.3s ease;
}

.user-info:hover .dropdown-icon {
  color: #3b82f6;
  transform: rotate(180deg);
}

/* 用户下拉菜单样式 */
.user-dropdown-menu {
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.user-profile {
  padding: 16px !important;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e2e8f0;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-name {
  font-weight: 600;
  color: #1e293b;
  font-size: 0.9rem;
}

.profile-email {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
}

.user-dropdown-menu .el-dropdown-menu__item {
  padding: 12px 16px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.user-dropdown-menu .el-dropdown-menu__item:hover {
  background: rgba(59, 130, 246, 0.05);
  color: #3b82f6;
}

.logout-item:hover {
  background: rgba(239, 68, 68, 0.05) !important;
  color: #ef4444 !important;
}

/* 主要内容区域 */
.admin-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 添加聚焦时的脉冲效果 */
@keyframes search-focus-pulse {
  0% {
    box-shadow:
      0 0 0 4px rgba(59, 130, 246, 0.08),
      0 16px 48px rgba(59, 130, 246, 0.15),
      0 8px 24px rgba(15, 23, 42, 0.08);
  }

  50% {
    box-shadow:
      0 0 0 6px rgba(59, 130, 246, 0.12),
      0 20px 56px rgba(59, 130, 246, 0.18),
      0 10px 28px rgba(15, 23, 42, 0.1);
  }

  100% {
    box-shadow:
      0 0 0 4px rgba(59, 130, 246, 0.08),
      0 16px 48px rgba(59, 130, 246, 0.15),
      0 8px 24px rgba(15, 23, 42, 0.08);
  }
}

.header-search .el-input__wrapper.is-focus {
  animation: search-focus-pulse 2s ease-in-out infinite;
}

/* 暗黑主题适配 */
@media (prefers-color-scheme: dark) {
  .header-search .el-input__wrapper {
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.95) 0%,
        rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(71, 85, 105, 0.3);
  }

  .header-search .el-input__inner {
    color: #f1f5f9;
  }

  .header-search .el-input__inner::placeholder {
    color: #64748b;
  }

  .search-suggestions {
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.98) 0%,
        rgba(15, 23, 42, 0.96) 100%);
    border-color: rgba(71, 85, 105, 0.3);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-header {
    padding: 0 16px;
    height: 56px;
  }

  .header-left {
    padding: 8px 0;
    gap: 8px;
  }

  .header-right {
    gap: 12px;
  }

  .quick-actions {
    gap: 6px;
  }

  .action-btn {
    width: 32px;
    height: 32px;
  }

  .custom-search {
    gap: 6px;
  }

  .user-detail {
    display: none;
  }

  .dropdown-icon {
    display: none;
  }

  .user-info {
    padding: 6px;
    gap: 0;
  }
}

@media (max-width: 480px) {
  .quick-actions {
    display: none;
  }

  .custom-search {
    gap: 4px;
  }

  .notification-badge {
    display: none;
  }

  .header-left {
    padding: 6px 0;
    gap: 6px;
  }
}
</style>